<template>
  <div class="Amap">
    <div class="wid00 hei00" id="mapBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import "echarts-gl"
import mapJson from '@/assets/json/city.json'
export default {
  data() {
    return {}
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let myChart = echarts.init(document.getElementById("mapBox"));
      echarts.registerMap("myMap", { geoJSON: mapJson });
      myChart.showLoading();
      myChart.hideLoading();
      var option = {
        series: [
          {
            type: "map",
            name: "mymap",
            roam: false,
            map: "myMap",
            emphasis: {
              label: {
                show: true,
                color: "#fff"
              },
              itemStyle: {
                areaColor: "#0C274B"
              }
            },
            // selectedMode: "multiple", // 可多选区域
            selectedMode: "single", 
            itemStyle: {
              normal: {
                areaColor: "#22C8FC",
                shadowColor: "#1D5B75",
                shadowBlur: 2,
                shadowOffsetX: 10,
                shadowOffsetY: 15,
                borderColor: "#BCFCFF",
                borderWidth: 1
              },
              emphasis: {
                areaColor: "#77c2c2"
              }
            },
            label: {
              normal: {
                //静态的时候展示样式
                show: false, //是否显示地图省份得名称
                //  formatter: '{c0}\n{b0}',
                textStyle: {
                  color: "#BCFCFF", // 区域文字 颜色
                  fontSize: 15,
                  fontFamily: "Arial"
                }
              },
              emphasis: {
                //动态展示的样式
                color: "#0030da", //选中区域的字体颜色
                show: true,
                textStyle: {
                  fontSize: 14,
                  fontFamily: "Arial"
                }
              }
            },

            // 选中状态下的多边形和标签样式
            select: {
              itemStyle: {
                areaColor: "#77c2c2" //选中区域的背景色
              },
              label: {
                show: true,
                color: "#ffffff"
              }
            },
            data: [
              {
                name: "全国数据",
                selected: true
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.Amap {
  width: 100%;
  height: 100%;
}

</style>